<template>
  <div class="main" :data="data">
    <div :id="id"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import geoJSON from './json/map.json'
import tools from './tools/autoHover.js' //引入tools.js
export default {
  name: 'map',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    id: function() {
      return `map-${Math.random()}`
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.onInit()
    })
  },
  updated() {
    this.$nextTick(() => {
      this.onInit()
    })
  },
  methods: {
    onInit() {
      echarts.registerMap('海南', geoJSON)
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var geoCoordMap = {
        海口市: [110.349235, 19.984966],
        三亚市: [109.508268, 18.247872],
        儋州市: [109.576782, 19.517486],
        五指山市: [109.516662, 18.776921],
        琼海市: [110.466785, 19.246011],
        文昌市: [110.753975, 19.612986],
        万宁市: [110.388793, 18.796216],
        东方市: [108.653789, 19.10198],
        定安县: [110.349235, 19.484966],
        屯昌县: [110.102773, 19.362916],
        澄迈县: [110.007147, 19.737095],
        临高县: [109.687697, 19.908293],
        白沙黎族自治县: [109.452606, 19.224584],
        昌江黎族自治县: [109.053351, 19.260968],
        乐东黎族自治县: [109.175444, 18.74758],
        陵水黎族自治县: [110.037218, 18.505006],
        保亭黎族苗族自治县: [109.70245, 18.636371],
        琼中黎族苗族自治县: [109.839996, 19.03557]
      }

      var convertData = function(data) {
        var res = []
        if (data.length > 0) {
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name]
            if (geoCoord) {
              let obj = {
                name: data[i].name
              }
              obj = {
                ...obj,
                ...data[i]
              }
              obj.value = geoCoord.concat(data[i].focusAreaNum) //重点区域数量来标注小红点
              res.push(obj)
            }
          }
        }
        // console.log("res")
        // console.log(res)
        return res
      }

      let setAmount = this.setAmount
      let setAmountText = this.setAmountText
      var option
      option = {
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: 'transparent',
          enterable: true, //是否支持鼠标移进
          // showContent: true, //是否显示提示框浮层，默认显示。
          // triggerOn: 'click', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
          formatter: function(params) {
            const { data } = params
            // console.log('data')
            // console.log(data)
            if (data != undefined) {
              const str =
                `<div id="map-tooltips-wrap">` +
                `<div class="title">${data.name}</div>` +
                `<div class="listItem">疑似走私人员：${data.smuPersonNum}</div>` +
                `<div class="listItem" style="text-align: left;">告警：${data.warnNum}</div>` +
                `<div class="listItem">重点区域：${data.focusAreaNum}</div>` +
                // `<div class="listItem" style="text-align: right;">案事件：${data.incidentNum}</div>` +
                `<div class="listItem">重点人员：${data.focusPersonNum}</div>` +
                `</div>`
              return str
            }
          },
          extraCssText: 'z-index: 9'
        },
        geo: [
          {
            map: '海南',
            label: {
              show: true,
              color: '#fff'
            },
            z: 2,
            zoom: 1.1,
            itemStyle: {
              areaColor: 'rgba(8,48,109, 0.2)',
              borderColor: 'rgba(0, 180, 255, .6)',
              borderWidth: 5,
              shadowColor: 'rgba(0, 180, 255, 1)',
              shadowBlur: 35
            },
            emphasis: {
              label: {
                color: '#fff'
              },
              itemStyle: {
                areaColor: 'rgba(0, 180, 255, 0.6)',
                borderWidth: 1
              }
            }
          }
        ],
        series: [
          {
            type: 'map',
            map: '海南',
            label: {
              show: false
            },
            z: 3,
            zoom: 1.1,
            itemStyle: {
              areaColor: 'rgba(8,48,109, 0.2)',
              borderColor: 'rgba(255, 255, 255, .6)',
              borderWidth: 2,
              shadowColor: 'rgba(0, 180, 255, 1)',
              shadowBlur: 35
            },
            emphasis: {
              label: {
                color: '#fff'
              },
              itemStyle: {
                areaColor: 'rgba(0, 180, 255, 0.6)',
                borderWidth: 1
              }
            },
            data: this.data
          },

          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(this.data),
            symbolSize: function(val) {
              const num = val[2]
              let size = 0
              if (num > 0 && num <= 20) {
                size = 10
              }
              if (num > 20 && num <= 50) {
                size = 15
              }
              if (num > 50) {
                size = 20
              }
              return size
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#D33C36',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            zlevel: 1
          }
        ]
      }
      myChart.setOption(option, true)
      tools.autoHover(myChart, option, this.data.length, 3000)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    setAmount(num) {
      let amount = 0
      if (num > 100000000) {
        let result = (num / 100000000).toString()
        amount = result.indexOf('.') === -1 ? result : result.toFixed(2)
      } else if (num > 100000) {
        let result = (num / 10000).toString()
        amount = result.indexOf('.') === -1 ? result : result.toFixed(2)
      } else {
        amount = num
      }
      return amount
    },
    setAmountText(num) {
      let text = ''
      if (num > 100000000) {
        text = '亿'
      } else if (num > 100000) {
        text = '万'
      }
      return text
    }
  }
}
</script>
<style lang="less">
@font-face {
  font-family: 'pang';
  src: url(../../font/PangMenZhengDaoBiaoTiTi-1.ttf);
}
#map-tooltips-wrap {
  font-family: 'MicrosoftYaHei-Bold';
  width: 50vh;
  // height: 22vh;
  background-image: url(./image/tooltips-wrap.png);
  background-size: 100% 100%;
  padding-top: 0.926vh;
  padding-bottom: 3vh;
  font-size: 1.48148vh;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  .title {
    width: 90%;
    height: 3.7vh;
    margin: 2.47vh;
    padding-left: 1.777vh;
    line-height: 3.7vh;
    background-image: url(./image/title.png);
    background-size: 100% 100%;
    font-size: 1.8vh;
  }
  .listItem {
    width: 50%;
    padding: 0 4.5vh;
    margin-bottom: 1.2vh;
    font-size: 1.8vh;
    overflow: hidden;
    span {
      float: left;
      width: 50%;
      margin-bottom: 1.2vh;
      overflow: hidden;
    }
  }
}
</style>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;

  > div {
    width: 100%;
    height: 100%;
  }
}
</style>
